<template>
    <div class="detail">
        <div class="goBack">
            <van-nav-bar
              title=""
              left-text=""
              left-arrow
              @click-left="onClickLeft"
            />
            <img src="../assets/img/collect.png" alt="" @click="add_likeFn" v-if="!isLike">
            <img src="../assets/img/collect_on.png" alt="" @click="add_likeFn" v-else>
        </div>
        
        <h3>{{ article_title }}</h3>
        <p>作者:{{ article_author }}</p>
        <p>时间:{{ article_create_time }}</p>
        <hr>
        <!-- <div class="text" v-html="article_content">
        </div> -->


        <div v-if="article_type == 1">
            <p>
                {{ article_content }}
            </p>
        </div>

        <div v-else-if="article_type == 2">
            <div class="text" v-html="article_content"></div>
        </div>

        <div v-else class="pic_text">
            <div v-for="(item,i) in picArr" :key="i" class="images">
                <div class="num">图片{{ i+1 }}</div>
                <img :src="item" alt="">
            </div>
        </div>
        <van-cell/>
        <van-back-top />
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { useRoute } from 'vue-router'
    import { addlikeFn,islikeFn } from '../api/index'
    import { showDialog } from 'vant';
    const $router = useRoute();
    let article_title:any = ref("");
    let article_content:any = ref("");
    let article_author:any = ref("");
    let article_create_time:any = ref("");
    let article_id:any = ref("");
    let article_type:any = ref("");
    let picUrl = ref("");
    let isLike = ref(false);
    article_id.value = $router.query.article_id;
    article_type.value = $router.query.article_type;
    article_title.value = $router.query.article_title;
    article_content.value = $router.query.article_content;
    article_author.value = $router.query.article_author;
    article_create_time.value = $router.query.article_create_time;
    article_create_time.value = article_create_time.value.replace(/T/g,' ');
    article_create_time.value = article_create_time.value.replace(/Z/g,' ');
    let picArr = ref([])
    if(article_type.value == 3){
        picArr = JSON.parse(article_content.value);
        console.log(picArr);
    }
    
    
    const onClickLeft = () => history.back();
    
    const add_likeFn =  async()=>{
        await addlikeFn({article_id:article_id.value,article_title:article_title.value}).then(
            (content:any)=>{
                // console.log(content)
                let {code} = content;
                // console.log(result,code)
                if(code == 200) {
                    isLike.value = true;
                    // 收藏成功
                    showDialog({
                      title: '',
                      message:`收藏成功`,
                    }).then(() => {
                    });
                }
                else if(code == 1){
                    isLike.value = true;
                    // 已经收藏了
                    showDialog({
                      title: '',
                      message:`已经收藏了`,
                    }).then(() => {
                    });
                }
            }
        )
    }

    // 查看是否收藏
    const isLikeFn = async ()=> {
        // let token = localStorage.getItem("TOKEN")
        await islikeFn({article_id:article_id.value}).then(
            (content:any)=>{
                // console.log(content)
                let {code} = content;
                // console.log(result,code)
                if(code == 200) {
                    isLike.value = true;
                    // console.log(isLike.value);
                    
                  // console.log(like_list.value);
                }
                else{
                    isLike.value = false;
                }
            }
        )
    }
    isLikeFn();

</script>

<style lang="less">
.detail{
    margin: 5px 15px;
    .goBack{
        position: relative;
        img{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 10px;
            z-index: 100;
            right: 20px;
        }
    }
    h3{
        font-size: 18px;
        padding-bottom: 10px;
    }
    p{
        font-size: 16px;
    }
}   

.text{
    line-height: 170%;
    font-size: 16px;
    a {
        color: #000;
    }
    img {
        width: 100%;
    }
    h3,
    h2,
    h1,
    h4,
    h5 {
        font-weight: normal;
        padding-bottom: 10px;
        padding-top: 10px;
        font-size: 16px;
    }
    p {
        color: #666;
    }
}

.pic_text{
    .images{
        margin-top: 40px;
        .num{
            font-size: 16px;
        }
        img{
            width: 100%;
        }
    }
    
}
.van-nav-bar__left{
    padding: 0;
}
</style>